<script setup>
import { getProvinceCitySceneryDataService } from '@/apis/destination'
import { ref, watch, computed, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 存储省份和有景点的城市数据
const provinceCitySceneryList = ref([])

// 导航栏点击激活项
const activeIndex = ref(0)

// 右侧滚动视图的scrollTop值
const scrollTop = ref(0)

// 记录右侧滚动视图的scrollTop值
const oldScrollTop = ref(0)

//记录当前scroll的位置
const scroll = (e) => {
	oldScrollTop.value = e.detail.scrollTop
}

// 把scrollTop设置为0
const goToTop = () => {
	scrollTop.value = oldScrollTop.value
	nextTick(() => {
		scrollTop.value = 0
	})
}

// 监听activeIndex的变化,调用函数
watch(activeIndex, (newValue, oldValue) => {
	if (newValue !== oldValue) {
		goToTop()
	}
})

// 获取省份和有景点的城市数据
const getProvinceCitySceneryData = async () => {
	const res = await getProvinceCitySceneryDataService()
	provinceCitySceneryList.value = res.data
}

// 提取当前选中省份的城市数据
const currentProvinceCity = computed(() => {
	return provinceCitySceneryList.value[activeIndex.value]?.city || []
})

// 页面加载时调用的函数
onLoad(() => {
	getProvinceCitySceneryData()
})
</script>

<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search"></view>

		<view class="menu">
			<!-- 左侧省份分类 -->
			<scroll-view class="menu-left" scroll-y="true">
				<view v-for="(item, index) in provinceCitySceneryList" :key="item.p_id" class="menu-left-item" :class="{ active: activeIndex === index }" @tap="activeIndex = index">
					<text class="menu-left-item-text">{{ item.p_name }}</text>
				</view>
			</scroll-view>

			<!-- 右侧景点数据 -->
			<scroll-view class="menu-right" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
				<view class="menu-right-panle">
					<view v-if="currentProvinceCity && currentProvinceCity.length > 0" class="menu-right-item" v-for="(item2, index2) in currentProvinceCity" :key="item2.c_id">
						<navigator :url="`/ComprehensivePackage/List/List?city_id=${item2.c_id}&city_name=${item2.c_name}`" class="menu-right-item-city" hover-class="none">
							<up-image :src="item2.image.url" mode="aspectFill" width="75" height="75" radius="15"></up-image>
							<view class="menu-right-item-city-text">{{ item2.c_name }}</view>
						</navigator>
					</view>

					<up-empty
						v-else
						text="该地区暂未接入,敬请期待"
						textSize="20"
						width="300"
						height="300"
						icon="https://leyouhui-1327374532.cos.ap-beijing.myqcloud.com/Static/data.png"
					></up-empty>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;

	.menu {
		height: 100%;
		display: flex;

		.menu-left {
			width: 200rpx;
			height: 100%;

			.menu-left-item {
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #f6f8fa;
				font-size: 30rpx;
				color: #595c63;
			}

			.active {
				background-image: linear-gradient(135deg, #43cbff 10%, #9708cc 100%);
				color: #f6f6f6;
				border-top-right-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
			}
		}

		.menu-right {
			width: 100%;
			background-color: #fff;

			.menu-right-panle {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.menu-right-item {
					width: 150rpx;
					margin: 23rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.menu-right-item-city {
						.menu-right-item-city-text {
							width: 150rpx;
							text-align: center;
							font-size: 30rpx;
							color: #333;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
}
</style>
